<template>
  <div class="example6">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <data-v-panel>
      <template #title
        >新闻列表
        <a href="JavaScript:;" class="look-code" @click="lookCode('news')"
          >代码</a
        >
      </template>
      <template #body>
        <data-v-news :list="newsList" round color="#0a8470"></data-v-news>
      </template>
    </data-v-panel>
    <data-v-panel>
      <template #title>新闻列表2</template>
      <template #body>
        <data-v-news :list="newsList" color="#09656d"></data-v-news>
      </template>
    </data-v-panel>

    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";

export default {
  name: "example5",
  components: {
    CodeContainer
  },
  data() {
    return {
      isShowCode: false,
      newsList: [
        {
          id: 1,
          text: "《中国人民解放军联合作战刚要》印发"
        },
        {
          id: 2,
          text: "2020中国普惠金融创新报告发布：成绩显著"
        },
        {
          id: 3,
          text: "“最美公务员”人员名单"
        }
      ]
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less">
.example6 {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
  .grid-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
}
</style>
